<template>
  <div id="app">
    <div class="tit">
      <span class="iconfont icon-fanhui"></span>
      <p class="h1">忘记密码</p>
    </div>
    <div>
      <mt-field label="手机号" placeholder="输入手机号" type="tel" :state="phoneStatus" v-model="phone" @blur.native.capture="changeTel"></mt-field>
      <mt-field label="验证码" placeholder="输入验证码" type="number" :state="numStatus" v-model="number" @blur.native.capture="changeNum"><button class="get" @click="getMsg" :disabled="isDisable">{{msg}}</button></mt-field>
    </div>
    <div class="btn">
      <a :href="href"><button class="add" @click="finish(phone)">下一步</button></a>
    </div>
  </div>
</template>
<script>
    export default {
        name:'App',
        components:{

        },
        data(){
            return{
                phone:'',
                phoneStatus:'',
                numStatus:'',
                number:'',
                num:'',
                msg:'获取验证码',
                isDisable:false,
                href:'javascript:;'
            }
        },
        mounted(){

        },
        methods:{
            changeTel(){
                let reg=/^0{0,1}(13[0-9]|15[0-9]|153|156|18[0-9])[0-9]{8}$/;
                if (!reg.test(this.phone)) {
                    this.phoneStatus="error";
                }else {
                    this.phoneStatus="success";
                }
            },
            changeNum(){
                if (this.number=this.num) {
                    this.numStatus="success"
                }else {
                    this.numStatus="error";
                }
            },
            Doble(n){
                if (n<10) {
                    return '0'+n;
                }else {
                    return ''+n;
                }
            },
            getMsg(){
                if (this.phone==''||this.phoneStatus=="error") {
                   return
                }else {
                    let n=60;
                    this.isDisable=true;
                    var timer=setInterval(()=> {
                        n--;
                        this.msg=this.Doble(n)+'s';
                        if (n==0){
                            clearInterval(timer);
                            this.msg='重新获取';
                            this.isDisable=false;

                        }
                    },1000);
                    this.axios({
                        method: 'get',
                        url: '/api/sv/sendVerifyCode',
                        params:{
                            "phoneNum":this.phone,
                        }
                    }).then((res)=>{
                        this.num=res.data.msg
                    }).catch(()=>{
                        console.log('网络错误')
                    });
                }
            },
            finish(phone){
              if (this.phoneStatus=="success"&&this.numStatus=="success"){
                  this.href='./password.html?name='+phone
              }
            }
        }

    }
</script>
<style lang="less">
  @baseFontSize:20px;
  @baseSize:20;
  html{
    font-size: @baseFontSize;
  }
  .px2rem(@name,@px){
      @{name}:@px / 2 / @baseSize * 1rem;
  }

  *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
#app {
  .tit{
    position: relative;
    background: orange;
    span{
      position: absolute;
      left: 15px;
      top: 10px;
    }
    .h1{
      text-align: center;
      .px2rem(line-height,80);
      .px2rem(height,80);
      border-bottom: 1px solid gray;
      color: white;
    }
  }
  .get{
    color: orangered;
    outline: none;
    border: none;
    background: white;
  }
  .btn{
    .px2rem(padding,20);
    .add{
      .px2rem(width,710);
      .px2rem(height,80);
      background: orangered;
      color: white;
      text-align: center;
      .px2rem(font-size,30);
      .px2rem(line-height,80);
      border: none;
      outline: none;
    }
  }
}


</style>
